﻿/// <reference path="../Core.ts" />

module Supernova {

    export class ReplayUI implements UI.ISwitchableUI {

        layout = {
            rootPanel: {
                left: 140, right: 140, top: 50, bottom: 0,
                controls: {
                    welcomeTitle: {
                        top: 0, width: 750, height: 20,
                        text: 'Supernova Multiplayer Replays'
                    },
                    mainPanel: {
                        top: 30, width: 750, bottom: 0,
                        controls: {
                            disconnectButton: {
                                left: 0, top: 0, width: 140, height: 30,
                                text: 'Disconnect',
                                onClick: this.handleDisconnectButtonClicked
                            },
                            newestRadioButton: {
                                left: 0, top: 40, width: 140, height: 20,
                                text: 'Newest First',
                                isChecked: true,
                                onChecked: this.handleSortOrderRadioButtonChecked
                            },
                            oldestRadioButton: {
                                left: 140, top: 40, width: 140, height: 20,
                                text: 'Oldest First',
                                onChecked: this.handleSortOrderRadioButtonChecked
                            },
                            longestRadioButton: {
                                left: 280, top: 40, width: 140, height: 20,
                                text: 'Longest First',
                                onChecked: this.handleSortOrderRadioButtonChecked
                            },
                            highestRadioButton: {
                                left: 420, top: 40, width: 140, height: 20,
                                text: 'Highest Rated',
                                onChecked: this.handleSortOrderRadioButtonChecked
                            },
                            excitingRadioButton: {
                                left: 560, top: 40, width: 140, height: 20,
                                text: 'Most Exciting',
                                onChecked: this.handleSortOrderRadioButtonChecked
                            },
                            replaysPanel: {
                                top: 70, width: 750, bottom: 0,
                                controls: {
                                }
                            }
                        }
                    }
                }
            }
        }

        public root: UI.UIControl = null;

        private y: number = 0;

        constructor() {
            this.root = UI.compile(this.layout)[0];
        }

        show() {
            channel.subscribe('onReceiveReplayFileName', this.handleReplayFileNameSupplied);
            this.handleSortOrderRadioButtonChecked(null, null);
        }

        hide() {
            channel.unsubscribe('onReceiveReplayFileName', this.handleReplayFileNameSupplied);
            Notices.clearMessages();
        }

        handleDisconnectButtonClicked(sender, e) {
            channel.disconnect();
            resetToMainMenu();
        }

        handleSortOrderRadioButtonChecked(sender, e) {

            // Empty the replays panel
            var panel = UI.getControlByName<UI.Panel>(replayUI.root, 'replaysPanel');
            panel.controls = [];
            replayUI.y = 0;

            // Ask for replays
            var count = 25;
            if (UI.getControlByName<UI.RadioButton>(replayUI.root, 'newestRadioButton').isChecked) channel.invoke.getReplays(count, 'DATE_DESC');
            if (UI.getControlByName<UI.RadioButton>(replayUI.root, 'oldestRadioButton').isChecked) channel.invoke.getReplays(count, 'DATE_ASC');
            if (UI.getControlByName<UI.RadioButton>(replayUI.root, 'longestRadioButton').isChecked) channel.invoke.getReplays(count, 'DURATION_DESC');
            if (UI.getControlByName<UI.RadioButton>(replayUI.root, 'highestRadioButton').isChecked) channel.invoke.getReplays(count, 'RATING_DESC');
            if (UI.getControlByName<UI.RadioButton>(replayUI.root, 'excitingRadioButton').isChecked) channel.invoke.getReplays(count, 'EXCITING_DESC');
        }

        handleReplayFileNameSupplied(title: string, fileName: string) {
            var panel = UI.getControlByName<UI.Panel>(replayUI.root, 'replaysPanel');
            var button = new UI.Button({ left: 0, top: replayUI.y, right: 0, height: 30 });
            button.text = title;
            button.tag = fileName;
            button.onClick = replayUI.handleReplayButtonClicked;
            panel.controls.push(button);
            replayUI.y += 40;
            UI.compute(UI.root, UI.Bounds.create(canvas));
        }

        handleReplayButtonClicked(sender, e) {
            UI.swap(null, UI.Bounds.create(canvas));
            channel.invoke.startReplay(sender.tag);
        }

    }

}